<template>
    <!-- 设备管理-首页 -->
    <div class="index" id="index">
        <div class="map">
            <div id="container" class="container"></div>
            <div class="mach">
                <el-collapse accordion>
                    <el-collapse-item>
                        <template slot="title">
                            <div class="title top">
                                <span>设备列表</span>
                            </div>
                        </template>
                        <div class="top">
                            <div class="content">
                                <Select v-model="corpId" style="width: 100%" placeholder="请选择" filterable @on-change="selectChangeFn" filter-by-label>
                                    <Option v-for="item in corpList" :value="item.corpId" :key="item.corpId" >{{ item.corpName }}</Option>
                                </Select>
                                <div class="search">
                                    <Input
                                        search
                                        enter-button
                                        clearable
                                        v-model="keyword"
                                        @on-search="searchMach"
                                        placeholder="请输入类型、编号"
                                        style="width: 3.83rem; margin: 10px 0"
                                    />
                                    <input type="text" class="intBox" />
                                </div>
                            </div>
                        </div>
                        <div class="center">
                            <div class="line"></div>
                            <div
                                class="ulbox"
                                style="border-bottom: none; margin-bottom: 0"
                            >
                                <Tabs
                                    v-model="tabActiveName"
                                    @on-click="getmachDetails"
                                >
                                    <TabPane
                                        :label="
                                            item.id == tabActiveName
                                                ? item.name + '(' + count + ')'
                                                : item.name
                                        "
                                        :name="String(item.id)"
                                        v-for="(item, index) in machList"
                                        :key="index"
                                    ></TabPane>
                                </Tabs>
                            </div>
                        </div>
                        <div class="bottom">
                            <ul v-if="machArray.length > 0">
                                <li
                                    v-for="(item, index) in machArray"
                                    :style="{
                                        background:
                                            index % 2 == 0
                                                ? '#E5ECFD'
                                                : '#FFFFFF',
                                    }"
                                    :key="index"
                                    @click="getMoreMach(item)"
                                    :class="{ link_active: item.machId == x }"
                                >
                                    <div>
                                        <img :src="item.icon" alt />
                                        <span
                                            style="
                                                width: 0.7rem;
                                                margin-left: 0.1rem;
                                                margin-right: 0.1rem;
                                                white-space: nowrap;
                                                white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;
                                            "
                                            >{{ item.machTypeName }}</span
                                        >
                                        <span
                                            class="spanbox"
                                            style="width: 2rem"
                                            >{{ item.machCode }}</span
                                        >
                                    </div>
                                    <div>
                                        <span
                                            v-if="
                                                item.workState === 3 &&
                                                item.netState != 0
                                            "
                                            style="color: #28D79C"
                                            >工作</span
                                        >
                                        <span
                                            v-if="item.netState === 0"
                                            style="color: #FF4848"
                                            >离线</span
                                        >
                                        <span
                                            v-if="
                                                (item.workState === 4 ||
                                                    item.workState === 1) &&
                                                item.netState != 0
                                            "
                                            style="color: #A9B0BB"
                                            >停机</span
                                        >
                                        <span
                                            v-if="
                                                item.workState === 2 &&
                                                item.netState != 0
                                            "
                                            style="color: #FFA64D"
                                            >怠机</span
                                        >
                                        <Icon type="ios-arrow-forward" />
                                    </div>
                                </li>
                            </ul>
                            <div class="no_data" v-else>
                                <img
                                    src="../../assets/images/common/rotary_nodata.png"
                                    alt=""
                                />
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>

        <Modal
            v-model="detailsModal"
            title="设备详情"
            width="1000px"
            :mask-closable="false"
            :footer-hide="true"
            class-name="detailsModal"
        >
            <Tabs v-model="detailActiveName">
                <TabPane label="设备信息" name="1">
                    <div class="detailMsg" style="position: relative">
                        <div class="info">
                            <div class="qrCode">
                                <div class="img">
                                    <img :src="qrCodeSrc" style="text-align: center" />
                                </div>
                                <div class="btn" style="text-align: center;margin-top: 10px;margin-bottom: 10px;">
                                    <el-button @click="downloadQRCode" type="primary" round size="small" plain >下载二维码</el-button>
                                </div>
                            </div>
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>基本信息</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left">
                                    <div class="list">
                                        <div class="item">
                                            <span>设备类型:</span>
                                            <span>{{
                                                machDetailsObj.machTypeName
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>设备编号:</span>
                                            <Tooltip
                                                transfer
                                                :content="
                                                    machDetailsObj.machCode
                                                        ? machDetailsObj.machCode
                                                        : '—'
                                                "
                                                placement="top-start"
                                                max-width="200"
                                            >
                                                <div
                                                    style="
                                                        width: 140px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        cursor: pointer;
                                                        color: #58595a;
                                                        margin-top: 4px;
                                                    "
                                                >
                                                    {{
                                                        machDetailsObj.machCode
                                                            ? machDetailsObj.machCode
                                                            : "—"
                                                    }}
                                                </div>
                                            </Tooltip>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>品牌型号:</span>
                                            <span>{{
                                                machDetailsObj.machModelName
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>持有单位:</span>
                                            <Tooltip
                                                transfer
                                                :content="
                                                    machDetailsObj.corpName
                                                        ? machDetailsObj.corpName
                                                        : '—'
                                                "
                                                placement="top-start"
                                                max-width="200"
                                            >
                                                <div
                                                    style="
                                                        width: 140px;
                                                        overflow: hidden;
                                                        text-overflow: ellipsis;
                                                        white-space: nowrap;
                                                        cursor: pointer;
                                                        color: #58595a;
                                                        margin-top: 4px;
                                                    "
                                                >
                                                    {{
                                                        machDetailsObj.corpName
                                                            ? machDetailsObj.corpName
                                                            : "—"
                                                    }}
                                                </div>
                                            </Tooltip>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item">
                                            <span>出厂时间:</span>
                                            <span>{{
                                                machDetailsObj.deliveryTime
                                                    ? machDetailsObj.deliveryTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>进场时间:</span>
                                            <span>{{
                                                machDetailsObj.enterTime
                                                    ? machDetailsObj.enterTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div class="item" v-if="stateFlag != 1">
                                            <span>退场时间:</span>
                                            <span>{{
                                                machDetailsObj.outerTime
                                                    ? machDetailsObj.outerTime
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="item">
                                            <span>累计工时:</span>
                                            <span>{{
                                                machDetailsObj.totalWorkHours
                                                    ? machDetailsObj.totalWorkHours +
                                                      "h"
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="right">
                                    <div
                                        class="arrow_left"
                                        v-if="imgList.length > 1"
                                        @click="prevFn"
                                    >
                                        <Icon type="ios-arrow-back" />
                                    </div>
                                    <div
                                        class="arrow_right"
                                        v-if="imgList.length > 1"
                                        @click="nextFn"
                                    >
                                        <Icon type="ios-arrow-forward" />
                                    </div>
                                    <div class="carousel">
                                        <el-carousel
                                            trigger="click"
                                            height="110px"
                                            v-if="imgList.length > 0"
                                            :autoplay="false"
                                            ref="carousel"
                                        >
                                            <el-carousel-item
                                                v-for="(item, index) in imgList"
                                                :key="index"
                                            >
                                                <img
                                                    :src="item"
                                                    alt=""
                                                    style="
                                                        width: 100%;
                                                        height: 100%;
                                                    "
                                                />
                                            </el-carousel-item>
                                        </el-carousel>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info" style="margin-top: 15px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>操作手信息</span>
                                </h2>
                            </div>
                            <div
                                class="operEmpList"
                                v-if="
                                    machDetailsObj.operEmpList &&
                                    machDetailsObj.operEmpList.length > 0
                                "
                            >
                                <div
                                    class="item"
                                    v-for="(
                                        item, index
                                    ) in machDetailsObj.operEmpList"
                                    :key="index"
                                >
                                    <div class="img">
                                        <img
                                            :src="peoImg"
                                            alt=""
                                            style="width: 100%; height: 100%"
                                        />
                                    </div>
                                    <div class="operEmpInfo">
                                        <div class="itemInfo">
                                            <span>姓名</span>
                                            <span>{{
                                                item.operEmpName
                                                    ? item.operEmpName
                                                    : "—"
                                            }}</span>
                                        </div>
                                        <div class="itemInfo">
                                            <span>电话</span>
                                            <span>{{
                                                item.phone ? item.phone : "—"
                                            }}</span>
                                        </div>
                                        <div class="itemInfo">
                                            <span>证件</span>
                                            <span>{{
                                                item.operEmpCert
                                                    ? item.operEmpCert
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="none_data"
                                v-else
                                style="
                                    width: 98%;
                                    height: 180px;
                                    margin: auto;
                                    text-align: center;
                                    line-height: 180px;
                                    font-size: 20px;
                                    color: #58595a;
                                "
                            >
                                暂无数据
                            </div>
                        </div>
                        <div class="info">
                            <div class="footerBox" style="border-top: 1px solid var(--themeColor)">
                                <div style="width: 90%;margin: 20px auto 10px;height: 40px;display: flex;justify-content: space-between;align-items: center;">
                                    <el-button
                                        round
                                        @click="toMachData(machDetailsObj.machId, 2)"
                                        type="primary"
                                        style="margin-left: 20px;">
                                        设备工时
                                    </el-button>
                                    <el-button
                                        v-if="deviceType == 1"
                                        round
                                        @click="toMachData(machDetailsObj.machId, 3)"
                                        type="primary"
                                        style="margin-left: 20px;">
                                        设备耗油
                                    </el-button>
                                    <el-button
                                        v-if="deviceType == 11"
                                        round
                                        @click="toMachData(machDetailsObj.machId, 5)"
                                        type="primary"
                                        style="margin-left: 20px;">
                                        设备参数
                                    </el-button>
                                    <el-button
                                        round
                                        @click="toMachData(machDetailsObj.machId, 1)"
                                        type="primary"
                                        style="margin-left: 20px;">
                                        运行轨迹
                                    </el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
                <TabPane :label="machProductName" name="2">
                    <div class="detailMsg">
                        <div class="info">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>硬件信息</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left">
                                    <div class="list">
                                        <div class="item">
                                            <span>硬件SN:</span>
                                            <span>{{
                                                machDetailsObj.sn
                                                    ? machDetailsObj.sn
                                                    : "—"
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="list">
                                        <div
                                            class="item"
                                            style="
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: center;
                                            "
                                        >
                                            <span>油箱容积:</span>
                                            <span style="width: 80px">{{
                                                machDetailsObj.oilTankVolume
                                                    ? machDetailsObj.oilTankVolume +
                                                      "L"
                                                    : "-"
                                            }}</span>
                                            <!-- <span class="tip">*</span> -->
                                        </div>
                                        <div
                                            class="item"
                                            style="
                                                display: flex;
                                                justify-content: flex-start;
                                                align-items: center;
                                            "
                                        >
                                            <span>油箱高度:</span>
                                            <span style="width: 105px">{{
                                                machDetailsObj.oilTankHeight
                                                    ? machDetailsObj.oilTankHeight +
                                                      "cm"
                                                    : "-"
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="info" style="margin-top: 20px">
                            <div class="title">
                                <h2>
                                    <span class="bc"></span>
                                    <span>硬件数据</span>
                                </h2>
                            </div>
                            <div class="infoBox">
                                <div class="left" style="width: 100%">
                                    <div class="list">
                                        <div
                                            class="item"
                                            style="
                                                flex: 1;
                                                display: flex;
                                                justify-content: flex-start;
                                            "
                                        >
                                            <div
                                                class="img"
                                                style="margin-right: 10px"
                                            >
                                                <img
                                                    src="../../assets/images/mach/common/equip_img.png"
                                                    style="
                                                        width: 190px;
                                                        height: 100px;
                                                    "
                                                    alt=""
                                                    class="img"
                                                />
                                            </div>
                                            <div class="text">
                                                <p style="margin: 30px 0">
                                                    <span>网络状态：</span>
                                                    <span>{{
                                                        machDetailsObj.netState ==
                                                        1
                                                            ? "在线"
                                                            : "离线"
                                                    }}</span>
                                                </p>
                                                <p>
                                                    <span>实时状态：</span>
                                                    <span
                                                        v-if="
                                                            machDetailsObj.netState ==
                                                            0
                                                        "
                                                        >—</span
                                                    >
                                                    <span
                                                        v-if="
                                                            machDetailsObj.workState ==
                                                                1 &&
                                                            machDetailsObj.netState !=
                                                                0
                                                        "
                                                        >停机</span
                                                    >
                                                    <span
                                                        v-if="
                                                            machDetailsObj.workState ==
                                                                2 &&
                                                            machDetailsObj.netState !=
                                                                0
                                                        "
                                                        >怠机</span
                                                    >
                                                    <span
                                                        v-if="
                                                            machDetailsObj.workState ==
                                                                3 &&
                                                            machDetailsObj.netState !=
                                                                0
                                                        "
                                                        >工作</span
                                                    >
                                                    <span
                                                        v-if="
                                                            machDetailsObj.workState ==
                                                                4 &&
                                                            machDetailsObj.netState !=
                                                                0
                                                        "
                                                        >休眠</span
                                                    >
                                                    <span
                                                        v-if="
                                                            machDetailsObj.workState ==
                                                                5 &&
                                                            machDetailsObj.netState !=
                                                                0
                                                        "
                                                        >错误</span
                                                    >
                                                </p>
                                            </div>
                                        </div>
                                        <div
                                            class="item"
                                            style="
                                                flex: 1;
                                                display: flex;
                                                justify-content: flex-start;
                                                margin-top: -10px;
                                            "
                                        >
                                            <div
                                                class="img"
                                                style="margin-right: 10px"
                                            >
                                                <img
                                                    src="../../assets/images/mach/common/fuelTank.png"
                                                    style="
                                                        width: 130px;
                                                        height: 160px;
                                                    "
                                                    alt=""
                                                    class="img"
                                                />
                                            </div>
                                            <div class="text">
                                                <p style="margin: 30px 0">
                                                    <span>剩余油量：</span>
                                                    <span>{{
                                                        machDetailsObj.remainOilPercent +
                                                        "%" +
                                                        "≈" +
                                                        machDetailsObj.remainOil +
                                                        "L"
                                                    }}</span>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </TabPane>
            </Tabs>
        </Modal>
    </div>
</template>
<script>
import {
    getMachQr_V1,
    getMachInfo_V1,
    getMachMapList_V1,
    getCorpList_V1,
} from "@/api/mach.js";
export default {
    data() {
        return {
            machProductName: "",
            peoImg: require("./../../assets/images/common/noPeo.png"),
            detailActiveName: "1",
            detailsModal: false,
            fuelTankFlag: false,
            machDetailsObj: {},
            imgList: [],
            qrCodeName: "",
            qrCodeSrc: "",
            oilTankVolume: "",
            oilTankHeight: "",
            bound_sn: "",
            boundId: "",
            snFlag: 0,
            sn: "",
            stateFlag: "",
            tabActiveName: "0",
            options: {
                disabledDate(date) {
                    return date > Date.now();
                },
            },
            corpList: [],
            corpId: -1,
            keyword: "",
            machList: [
                {
                    id: 0,
                    name: "全部",
                },
                {
                    id: 4,
                    name: "工作",
                },
                {
                    id: 3,
                    name: "怠机",
                },
                {
                    id: 2,
                    name: "停机",
                },
                {
                    id: 1,
                    name: "离线",
                },
            ],
            Dlist: [
                {
                    id: 0,
                    name: "按日",
                },
                {
                    id: 1,
                    name: "按周",
                },
                {
                    id: 2,
                    name: "按月",
                },
                {
                    id: 3,
                    name: "自定义",
                },
            ],
            oilDlist: [
                {
                    id: 0,
                    name: "按日",
                },
                {
                    id: 1,
                    name: "近三天",
                },
                {
                    id: 2,
                    name: "按周",
                },
            ],
            data: 0,
            workState: "",
            i: "",
            j: "",
            x: "",
            y: "",
            z: "",
            machArray: [],
            mapList: [],
            machFlag: false,
            detailsOperEmpList: [],
            empId: "",
            machId: "",
            workTypeName: "",
            age: "",
            infoWindow: "",
            marker: "",
            lineArr: [],
            gpsList: [],
            timeover: false,
            gsptime: "",
            day: new Date(),
            detailsObj: {},
            gspModal: false,
            radarModal: false,
            randarObj: {},
            radarEenterTime: new Date(new Date().valueOf() - 604800000),
            radarOutTime: new Date(),
            randarlist: [],
            maxcnt: [], //雷达图最大值
            randar: {},
            id: "",
            oilModal: false,
            oilEenterTime: new Date(new Date().valueOf() - 604800000),
            oilOutTime: new Date(),
            oilNum: [],
            oilTime: [],
            oilWear: "",
            oilWearlist: [],
            remainOilList: [],
            remainOilPercentlist: [],
            timeList: [],
            workEenterTime: new Date(new Date().valueOf() - 604800000),
            workOutTime: new Date(),
            workModal: false,
            idleTimes: "",
            stopTimes: "",
            workTimes: "",
            workTimesList: [],
            idleTimesList: [],
            monthList: [],
            Tlist: [],
            z: "",
            k: "",
            r: "",
            keyword: "",
            equipCode: "",
            workStateTypeList: [],
            deptId: "",
            map: "",
            markList: [],
            playbackList: [],
            time: "",
            playFlag: true,
            time1: null,
            step: 30,
            max: 86400,
            slider: 0,
            count: 0,
            imgFlag: false,
            times: "00:00:00",
            bgimgList: [
                require("./../../assets/images/mach/index/record0.png"),
            ],
            icon: "",
            markers: "",
            polyline: "",
            lat: "",
            lng: "",
            deptName: "",
            workStatelist: [
                {
                    id: 0,
                    name: "全部",
                },
                {
                    id: 3,
                    name: "工作",
                },
                {
                    id: 2,
                    name: "怠机",
                },
                {
                    id: 1,
                    name: "停机",
                },
            ],
            workArr: [],
            idleArr: [],
            downtimeArr: [],
            offlineArr: [],
            workMapArr: [],
            idleMapArr: [],
            downtimeMapArr: [],
            offlineMapArr: [],
            deviceType: "",
            machType: "",
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        },
    },
    watch: {
        data(val) {
            if (val == 1) {
                this.oilEenterTime = new Date(new Date().valueOf() - 259200000);
                this.oilOutTime = new Date();
            } else {
                this.oilEenterTime = new Date(new Date().valueOf() - 604800000);
                this.oilOutTime = new Date();
            }
        },
        z(val) {
            this.workStateTypeList = [];
            this.Tlist.forEach((i) => {
                if (val == 0) {
                    this.workStateTypeList.push(i);
                } else {
                    if (val == i.workState) {
                        this.workStateTypeList.push(i);
                    }
                }
            });
        },
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.lat = val.lng == undefined ? 30.592335 : val.lng;
                this.lng = val.lat == undefined ? 114.29484 : val.lat;
                this.deptName = val.name;
                this.mapList = [];
                this.workArr = [];
                this.idleArr = [];
                this.downtimeArr = [];
                this.offlineArr = [];
                this.workMapArr = [];
                this.idleMapArr = [];
                this.downtimeMapArr = [];
                this.offlineMapArr = [];
                this.tabActiveName = "0";
                this.deviceType = "";
                this.machType = "";
                this.getMachMapListFn();
                this.getCorpListFn();
            }
        },
        gspModal(val) {
            if (!val) {
                this.pause();
                this.map.remove(this.polyline);
            }
        },
    },
    beforeDestroy() {
        if (this.time1) {
            clearInterval(this.time1); // 在Vue实例销毁前，清除定时器
        }
    },
    mounted() {
        this.initDate();
        this.machProductName = localStorage.getItem("dzh_machProductName");
    },
    methods: {
        selectChangeFn(name) {
            this.getMachMapListFn();
        },
        toMachWorkFn(machId) {
            this.$router.push({
                path: "/mach/data",
                query: { machId, type: 2 },
            });
        },
        toMachOilFn(machId) {
            this.$router.push({
                path: "/mach/data",
                query: { machId, type: 3 },
            });
        },
        toMachGPSFn(machId) {
            this.$router.push({
                path: "/mach/data",
                query: { machId, type: 1 },
            });
        },
        toMachData(machId, type) {
            switch (type) {
                case 1:
                    this.$router.push({
                        path: "/mach/data",
                        query: {
                            machId,
                            type: 1,
                            deviceType: this.deviceType,
                            machTypeId: this.machType,
                        },
                    });
                    break;
                case 2:
                    this.$router.push({
                        path: "/mach/data",
                        query: {
                            machId,
                            type: 2,
                            deviceType: this.deviceType,
                            machTypeId: this.machType,
                        },
                    });
                    break;
                case 3:
                    this.$router.push({
                        path: "/mach/data",
                        query: {
                            machId,
                            type: 3,
                            deviceType: this.deviceType,
                            machTypeId: this.machType,
                        },
                    });
                    break;
                case 5:
                    this.$router.push({
                        path: "/mach/data",
                        query: {
                            machId,
                            type: 5,
                            deviceType: this.deviceType,
                            machTypeId: this.machType,
                        },
                    });
                    break;
            }
        },
        nextFn() {
            this.$refs.carousel.next();
        },
        prevFn() {
            this.$refs.carousel.prev();
        },
        downloadQRCode() {
            let image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            let canvas = document.createElement("canvas");
            let name = this.qrCodeName;
            image.onload = function () {
                canvas.width = image.width;
                canvas.height = image.height;
                let context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
                let a = document.createElement("a"); // 生成一个a元素
                let event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = this.qrCodeSrc;
        },
        initDate() {
            this.deptId = this.$store.state.porjectObject.deptId;
            this.lat =
                this.$store.state.porjectObject.lat == undefined
                    ? 30.592335
                    : this.$store.state.porjectObject.lat;
            this.lng =
                this.$store.state.porjectObject.lng == undefined
                    ? 114.29484
                    : this.$store.state.porjectObject.lng;
            this.deptName = this.$store.state.porjectObject.name;
            this.getMachMapListFn();
            this.getCorpListFn();
        },
        getCorpListFn() {
            let params = {
                deptId: this.deptId,
            };
            getCorpList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.corpList.push();
                        let obj = {
                            corpId: -1,
                            corpName: "全部",
                        };
                        this.corpList = [obj, ...res.data.list];
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getmachDetails(item) {
            let arr = [];
            this.mapList = [];
            if (item == 0) {
                this.machArray = [
                    ...this.workArr,
                    ...this.idleArr,
                    ...this.downtimeArr,
                    ...this.offlineArr,
                ];
                this.mapList = [
                    ...this.workMapArr,
                    ...this.idleMapArr,
                    ...this.downtimeMapArr,
                    ...this.offlineMapArr,
                ];
            } else if (item == 1) {
                this.machArray = [...this.offlineArr];
                this.mapList = [...this.offlineMapArr];
            } else if (item == 2) {
                this.machArray = [...this.downtimeArr];
                this.mapList = [...this.downtimeMapArr];
            } else if (item == 3) {
                this.machArray = [...this.idleArr];
                this.mapList = [...this.idleMapArr];
            } else if (item == 4) {
                this.machArray = [...this.workArr];
                this.mapList = [...this.workMapArr];
            }
            this.count = this.machArray.length;
            let lat, lng;
            let a = [];
            let b = [];
            this.mapList.forEach((i) => {
                a.push(i.lat);
                b.push(i.lng);
            });
            //求和
            let latSum = a.reduce((prev, cur) => {
                return prev + cur;
            }, 0);
            let lngSum = b.reduce((prev, cur) => {
                return prev + cur;
            }, 0);
            lat = latSum / a.length;
            lng = lngSum / b.length;
            this.getmap(lng, lat);
        },
        //获取首页设备列表
        getMachMapListFn() {
            let num;
            if (this.i == 0) {
                num = "";
            } else {
                num = parseInt(this.i) - 1;
            }
            let params = {
                deptId: this.deptId,
                corpId: this.corpId == -1 ? "" : this.corpId,
                keyword: this.keyword,
            };
            getMachMapList_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.mapList = [];
                        this.workArr = [];
                        this.idleArr = [];
                        this.downtimeArr = [];
                        this.offlineArr = [];
                        this.workMapArr = [];
                        this.idleMapArr = [];
                        this.downtimeMapArr = [];
                        this.offlineMapArr = [];
                        let arr = [];
                        res.data.mapList.forEach((i) => {
                            if (i.lat) {
                                let obj = {
                                    lat: i.lat,
                                    lng: i.lng,
                                    icon: i.icon,
                                    id: i.machId,
                                    machTypeName: i.machTypeName,
                                    machType: i.machType,
                                    machCode: i.machCode,
                                    netState: i.netState,
                                    workState: i.workState,
                                    deviceType: i.deviceType,
                                };
                                if (i.netState === 0) {
                                    this.offlineMapArr.push(obj);
                                } else {
                                    if (
                                        i.workState === 1 ||
                                        i.workState === 4
                                    ) {
                                        this.downtimeMapArr.push(obj);
                                    } else if (i.workState === 3) {
                                        this.workMapArr.push(obj);
                                    } else if (i.workState === 2) {
                                        this.idleMapArr.push(obj);
                                    }
                                }
                                this.mapList.push(obj);
                            }
                        });
                        res.data.list.forEach((i) => {
                            if (i.netState === 0) {
                                this.offlineArr.push(i);
                            } else {
                                if (i.workState === 1 || i.workState === 4) {
                                    this.downtimeArr.push(i);
                                } else if (i.workState === 3) {
                                    this.workArr.push(i);
                                } else if (i.workState === 2) {
                                    this.idleArr.push(i);
                                }
                            }
                        });
                        if (this.tabActiveName == 0) {
                            this.machArray = [
                                ...this.workArr,
                                ...this.idleArr,
                                ...this.downtimeArr,
                                ...this.offlineArr,
                            ];
                        } else if (this.tabActiveName == 1) {
                            this.machArray = [...this.offlineArr];
                        } else if (this.tabActiveName == 2) {
                            this.machArray = [...this.downtimeArr];
                        } else if (this.tabActiveName == 3) {
                            this.machArray = [...this.idleArr];
                        } else if (this.tabActiveName == 4) {
                            this.machArray = [...this.workArr];
                        }
                        this.count = this.machArray.length;
                        let lat, lng;
                        let a = [];
                        let b = [];
                        this.mapList.forEach((i) => {
                            a.push(i.lat);
                            b.push(i.lng);
                        });
                        //求和
                        let latSum = a.reduce((prev, cur) => {
                            return prev + cur;
                        }, 0);
                        let lngSum = b.reduce((prev, cur) => {
                            return prev + cur;
                        }, 0);
                        lat = latSum / a.length;
                        lng = lngSum / b.length;
                        this.getmap(lng, lat);
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        getmap(lng, lat, id) {
            var _that = this;
            let list;
            list = [];
            list = _that.machArray;
            if (_that.mapList.length > 0) {
                var map = new AMap.Map("container", {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    zoom: 13,
                    center: [lng, lat],
                });
            } else {
                var map = new AMap.Map("container", {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    zoom: 4,
                });
            }
            var cluster,
                markers = [];
            let imageSize;
            imageSize = 48;
            _that.infoWindow = new AMap.InfoWindow({
                offset: new AMap.Pixel(0, -30),
            });
            _that.mapList.forEach((i) => {
                var marker = new AMap.Marker({
                    map: map,
                    icon: new AMap.Icon({
                        image: i.icon,
                        size: new AMap.Size(128, 128), //图标大小
                        imageSize: new AMap.Size(imageSize, imageSize),
                    }),
                    id: i.id,
                    deviceType: i.deviceType,
                    machType: i.machType,
                    position: [i.lng, i.lat],
                    offset: new AMap.Pixel(-13, -30),
                });
                markers.push(marker);
                if (i.netState == 1) {
                    if (i.workState === 3) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 0), //设置文本标注偏移量
                            content:
                                "<div class='in_fo100 in_fo3'>" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top", //设置文本标注方位
                        });
                    } else if (i.workState === 0) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 0), //设置文本标注偏移量
                            content:
                                "<div class='in_fo100 in_fo0'>" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top", //设置文本标注方位
                        });
                    } else if (i.workState === 2) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 0), //设置文本标注偏移量
                            content:
                                "<div class='in_fo100 in_fo2'>" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top", //设置文本标注方位
                        });
                    } else if (i.workState === 4 || i.workState === 1) {
                        marker.setLabel({
                            offset: new AMap.Pixel(-40, 0), //设置文本标注偏移量
                            content:
                                "<div class='in_fo100 in_fo4'>" +
                                i.machTypeName +
                                "-" +
                                i.machCode +
                                "</div>", //设置文本标注内容
                            direction: "top", //设置文本标注方位
                        });
                    }
                } else {
                    marker.setLabel({
                        offset: new AMap.Pixel(-40, 0), //设置文本标注偏移量
                        content:
                            "<div class='in_fo100 in_fo0'>" +
                            i.machTypeName +
                            "-" +
                            i.machCode +
                            "</div>", //设置文本标注内容
                        direction: "top", //设置文本标注方位
                    });
                }
                AMap.event.addListener(marker, "click", function (e) {
                    let obj = e.target.Ce ? e.target.Ce : e.target.De;
                    _that.machId = obj.id;
                    _that.deviceType = obj.deviceType;
                    _that.machType = obj.machType;
                    _that.getDetails();
                    map.setZoomAndCenter(15, e.target.getPosition());
                });
            });
            if (id) {
                for (let i in markers) {
                    let lnglat = markers[i];
                    let markerId = markers[i].Ce
                        ? markers[i].Ce.id
                        : markers[i].De.id;
                    if (id == markerId) {
                        var clickHandlerMach = function (e) {
                            var marker = new AMap.Marker({
                                map: map,
                                icon: new AMap.Icon({
                                    image: lnglat.Ce
                                        ? lnglat.Ce.icon.Ce.image
                                        : lnglat.De.icon.De.image,
                                    size: new AMap.Size(128, 128), //图标大小
                                    imageSize: new AMap.Size(
                                        imageSize,
                                        imageSize
                                    ),
                                }),
                                id: id,
                                name: name,
                                position: [lng, lat],
                                offset: new AMap.Pixel(-13, -30),
                            });
                            map.setZoomAndCenter(15, lnglat.getPosition());
                        };
                        map.on("click", clickHandlerMach);
                        map.on("complete", function (e) {
                            // 模拟触发地图click事件
                            map.emit("click", {
                                lnglat: map.Ce
                                    ? map.Ce.overlays[i]
                                    : map.De.overlays[i],
                            });
                        });
                    }
                }
            }
            map.setFitView();
            //聚合点
            var count = markers.length;
            if (count >= 3) {
                var _renderClusterMarker = function (context) {
                    var factor = Math.pow(context.count / count, 1 / 18);
                    var div = document.createElement("div");
                    div.setAttribute("class", "abc");
                    var size = 75;
                    div.innerHTML = context.count;
                    context.marker.setOffset(
                        new AMap.Pixel(-size / 2, -size / 2)
                    );
                    context.marker.setContent(div);
                };
                addCluster(2);
            }
            function addCluster(tag) {
                if (cluster) {
                    cluster.setMap(null);
                }
                if (tag == 2) {
                    //完全自定义
                    cluster = new AMap.MarkerClusterer(map, markers, {
                        gridSize: 15,
                        renderClusterMarker: _renderClusterMarker,
                    });
                } else if (tag == 1) {
                    //自定义图标
                    var sts = [
                        {
                            url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
                            size: new AMap.Size(32, 32),
                            offset: new AMap.Pixel(-16, -16),
                        },
                        {
                            url: "https://a.amap.com/jsapi_demos/static/images/green.png",
                            size: new AMap.Size(32, 32),
                            offset: new AMap.Pixel(-16, -16),
                        },
                        {
                            url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
                            size: new AMap.Size(36, 36),
                            offset: new AMap.Pixel(-18, -18),
                        },
                        {
                            url: "https://a.amap.com/jsapi_demos/static/images/red.png",
                            size: new AMap.Size(48, 48),
                            offset: new AMap.Pixel(-24, -24),
                        },
                        {
                            url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
                            size: new AMap.Size(48, 48),
                            offset: new AMap.Pixel(-24, -24),
                        },
                    ];
                    cluster = new AMap.MarkerClusterer(map, markers, {
                        styles: sts,
                        gridSize: 80,
                    });
                } else {
                    //默认样式
                    cluster = new AMap.MarkerClusterer(map, markers, {
                        gridSize: 20,
                    });
                }
            }
        },
        getDetails() {
            this.detailActiveName = "1";
            let params = {
                machId: this.machId,
            };
            this.detailsModal = true;
            this.qrCodes(this.machId);
            getMachInfo_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.machDetailsObj = res.data;
                        this.qrCodeName = this.machDetailsObj.machCode;
                        this.stateFlag = this.machDetailsObj.state;
                        this.imgList = this.machDetailsObj.imgList;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        qrCodes(machId) {
            let params = {
                machId: machId,
            };
            getMachQr_V1(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.qrCodeSrc = res.data.path;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch((error) => {
                    console.log(error);
                });
        },
        searchMach() {
            this.getMachMapListFn();
        },
        getMoreMach(item) {
            this.x = item.machId;
            this.deviceType = item.deviceType;
            this.machType = item.machType;
            // if (!item.lng) {
            //     this.$Message.warning('暂无设备位置信息');
            //     return;
            // }
            // if (item.netState === 0 ) {
            //     this.$Message.warning('该设备已离线');
            //     return;
            // }
            this.machId = item.machId;
            this.getDetails();
            // this.getmap(item.lng, item.lat, item.machId);
        },
        getWorkStateType(item) {
            this.z = item;
        },
    },
};
</script>

<style lang="less" scoped>
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/modal.less";
</style>

<style lang="scss" scoped>

@function pxToRem($val) {
    @return $val/100 + rem;
}
/deep/.index {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .map {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        margin: 0 auto;
        align-items: center;
        border-radius: pxToRem(10);
        .container {
            width: 100%;
            height: 100%;
        }
        .mach {
            position: absolute;
            width: pxToRem(430);
            top: pxToRem(30);
            left: pxToRem(30);
            border-radius: pxToRem(10);
            // .el-collapse-item__header {
            //     background: #fff !important;
            //     color: #1891ff !important;
            //     box-shadow: 0px 8px 7px 1px rgba(30,30,30,0.3100);
            // }
            .el-collapse-item__wrap {
                margin-top: pxToRem(8);
                box-sizing: border-box;
                // box-shadow: 0px 8px 7px 1px rgba(30,30,30,0.3100);
            }
            .ivu-select-selection,
            .ivu-input-wrapper {
                // border: 1px solid #1891ff;
                border-radius: 2px;
                box-sizing: border-box;
                &::before{
                    content: '';
                    width: 36px;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    right: 0;
                    // background: #1891FF;
                }
                .ivu-select-arrow{
                    right: 10px;
                    font-size: 18px;
                    color: #fff;
                }
            }
            .ivu-input,
            .ivu-input-search {
                border: none;
                border-radius: 0;
            }
            .ivu-input-search {
                padding-left:8px !important;
                padding-right:8px !important;
                // background-color: #1891ff !important;
            }

            .title {
                font-size: pxToRem(14);
                margin-left: pxToRem(20);
            }
            .top {
                width: 100%;
                height: auto;
                // border-top:1px solid #000;
                // border-bottom: 1px solid #000;
                // .ivu-input-icon-clear {
                //     right: pxToRem(50);
                // }
                .content {
                    width: 90%;
                    margin: pxToRem(10) auto;
                    .search {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                    // 修改滚动条样式
                    /deep/::-webkit-scrollbar {
                        width: pxToRem(6); //竖轴宽度
                        height: pxToRem(6); //横轴宽度
                        background-color: #fff;
                    }

                    /* 滚动槽 */
                    /deep/::-webkit-scrollbar-track {
                        border-radius: pxToRem(10);
                    }

                    /deep/::-webkit-scrollbar-thumb {
                        background-color: var(--themeColor);
                    }
                }
            }
            .center {
                width: 100%;
                height: auto;
                // border-bottom: 1px solid #000;
                .line {
                    width: 100%;
                    height: pxToRem(4);
                    background: #E1EAFA;
                    opacity: 0.24;
                }
                .ulbox {
                    width: 95%;
                    height: pxToRem(60);
                    margin: pxToRem(10) auto;
                    list-style: none;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    border-bottom: 1px solid #c5c8ce;
                    li {
                        margin-right: 10px;
                        cursor: pointer;
                    }
                }
            }
            .bottom {
                width: 100%;
                height: auto;
                ul {
                    width: 100%;
                    list-style: none;
                    height: pxToRem(500);
                    overflow-y: scroll;
                    &::-webkit-scrollbar {
                        width: 6px;
                    }
                    /*滚动槽*/
                    &::-webkit-scrollbar-track {
                        box-shadow: inset 0 0 6px rgba(32, 95, 255, 0.1);
                        -webkit-box-shadow: inset 0 0 6px rgba(32, 95, 255, 0.1);
                        border-radius: 10px;
                    }
                    /* 滚动条滑块 */
                    &::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        background: rgba(32, 95, 255, 0.1);
                        box-shadow: inset 0 0 6px rgba(32, 95, 255, 0.1);
                        -webkit-box-shadow: inset 0 0 6px rgba(32, 95, 255, 0.1);
                    }
                    &::-webkit-scrollbar-thumb:window-inactive {
                        background: rgba(255, 0, 0, 0.4);
                    }
                    li {
                        width: 95%;
                        margin: 0 auto;
                        padding: 0 5%;
                        padding-left: 2%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        background: rgba(249, 249, 249, 1);
                        height: pxToRem(50);
                        cursor: pointer;
                        div {
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            font-size: pxToRem(14);
                            img {
                                width: pxToRem(25);
                                height: pxToRem(25);
                            }
                        }
                        .spanbox {
                            width: pxToRem(200);
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                }
                ul::-webkit-scrollbar {
                    width: 0;
                }
                /*滚动槽*/
                ul::-webkit-scrollbar-track {
                    box-shadow: inset 0 0 6px var(--themeColor);
                    -webkit-box-shadow: inset 0 0 6px var(--themeColor);
                    border-radius: 10px;
                }
                /* 滚动条滑块 */
                ul::-webkit-scrollbar-thumb {
                    border-radius: pxToRem(10);
                    background: var(--themeColor);
                    box-shadow: inset 0 0 6px var(--themeColor);
                    -webkit-box-shadow: inset 0 0 6px var(--themeColor);
                }
                ul::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 0, 0, 0.4);
                }
                .no_data {
                    width: 100%;
                    height: pxToRem(500);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    img {
                        display: block;
                        width: 100%;
                        height: pxToRem(250);
                        margin: 0 auto;
                    }
                }
            }
        }
        .btn {
            position: absolute;
            top: pxToRem(30);
            right: pxToRem(30);
            padding: pxToRem(10);
            background: #e5f5ff;
        }
    }
    .prj {
        width: 96%;
        margin: 0 auto;
        height: pxToRem(50);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: pxToRem(10);
        background: #fff;
        border-radius: 5px 5px 0 0;
    }
    .el-icon-arrow-right:before{
        content: "" !important;
    }
}
.title.top {
    width: 90%;
    margin: 0 auto;
    font-size: pxToRem(18);
    text-align: center;
}
.link_active {
    background: var(--themeColor) !important;
    color: #fff !important;
    // border-bottom: 1px solid #2b85e4 !important;
}
.intBox {
    display: none;
}
.info {
    color: red;
}
.amap-info-content .amap-info-outer {
    padding: 0px important;
}

h2 {
    margin-top: pxToRem(10);
    margin-bottom: pxToRem(10);
    font-size: pxToRem(14);
    font-weight: 400;
}
</style>


